<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/mui.min.css">
    <link rel="stylesheet" href="css/forConsumption.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/mui.js"></script>
    <script src="js/forConsumption.js"></script>


    <title>待消费</title>
</head>

<body>
    <style>
        .mui-control-content {
            background-color: white;
            min-height: 215px;
        }

        /* .mui-control-content .mui-loading {
            margin-top: 50px;
        } */
    </style>
    <div class="mui-content">
        <div id="slider" class="mui-slider">
            <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <a class="mui-control-item" href="#item1mobile">
                    待消费
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    服务中
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    已取消/过号
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    已完成
                </a>
            </div>
            <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
            <div class="mui-slider-group">
                <!-- 待消费 -->
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                    <div class="item1waiting">
                        <text class="item1waittitle">等待中</text>
                        <text class="item1waitnum">订单编号
                            <span>2018091874938</span>
                        </text>
                    </div>
                    <!-- 评分模块 -->
                    <div class="grade">
                        <div class="store_grade">
                            <div class="grade_top">A26</div>
                            <div class="grade_bottom">排队号码</div>
                        </div>
                        <div class="grade_center"></div>
                        <div class="takepartin_grade">
                            <div class="grade_top">2
                            </div>
                            <div class="grade_bottom">当前等待人数</div>
                        </div>
                    </div>
                    <!-- 地址 -->
                    <div class="hair_address">
                        <div class="dian">店</div>
                        <text>武汉市 江汉区 武汉商务区地铁站匠心汇B18-7商铺</text>
                        <div class="add_right">></div>
                    </div>
                    <!-- 排号详细信息 -->
                    <div class="numdetails">
                        <div class="details_store">
                            <text class="details_left">所在店面</text>
                            <text class="details_right">武汉商务区·匠心汇店</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">发型师</text>
                            <text class="details_right">Gilbert</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">合计</text>
                            <text class="details_right">￥39</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">时间</text>
                            <text class="details_right">2018-09-12 15:01:24</text>
                        </div>
                    </div>
                    <div class="hint">请时刻留意排队状态，不要走远了哟~</div>
                    <button class="cancel" id="cancel_order">取消排号</button>
                </div>
                <!-- 服务中 -->
                <div id="item2mobile" class="mui-slider-item mui-control-content">
                    <div class="item2order">
                        <div class="item1waiting">
                            <text class="item1waittitle">正在剪发</text>
                            <text class="item1waitnum">订单编号
                                <span>2018091874938</span>
                            </text>
                        </div>
                        <!-- 评分模块 -->
                        <div class="grade">
                            <div class="store_grade line_up-num">
                                <div class="grade_top">A26</div>
                                <div class="grade_bottom">排队号码</div>
                            </div>
                        </div>
                        <!-- 地址 -->
                        <div class="hair_address">
                            <div class="dian">店</div>
                            <text>武汉市 江汉区 武汉商务区地铁站匠心汇B18-7商铺</text>
                            <div class="add_right">></div>
                        </div>
                        <!-- 排号详细信息 -->
                        <div class="numdetails">
                            <div class="details_store">
                                <text class="details_left">所在店面</text>
                                <text class="details_right">武汉商务区·匠心汇店</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">发型师</text>
                                <text class="details_right">Gilbert</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">合计</text>
                                <text class="details_right">￥39</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">时间</text>
                                <text class="details_right">2018-09-12 15:01:24</text>
                            </div>
                        </div>
                        <button class="cancel" id="confirm_pay">确认支付</button>
                    </div>
                    <div class="item2pay">
                        <div class="item1waiting item2pay_wait">
                            <text class="item1waittitle">等待中</text>
                            <text class="item1waitnum">订单编号
                                <span>2018091874938</span>
                            </text>
                        </div>
                        <!-- 排号详细信息 -->
                        <div class="numdetails">
                            <div class="details_store">
                                <text class="details_left">所在店面</text>
                                <text class="details_right">武汉商务区·匠心汇店</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">发型师</text>
                                <text class="details_right">Gilbert</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">合计</text>
                                <text class="details_right">￥39</text>
                            </div>
                            <div class="details_store">
                                <text class="details_left">时间</text>
                                <text class="details_right">2018-09-12 15:01:24</text>
                            </div>
                        </div>
                        <!-- 使用剪发券 -->
                        <div class="cut_coupons">
                            <div class="details_store">
                                <text class="details_left coupon_left">使用剪发券
                                    <span>限时买赠</span>
                                </text>
                                <!-- <a href="buyCoupons.html"><text class="details_right coupon_right_blue" id="nocoupon">暂无可用，购买享优惠 ></text></a> -->
                                <a href="useMyCoupon.html">
                                    <text class="details_right coupon_right_blue" id="hascoupon">有6张可用 ></text>
                                </a>
                                <!-- <text class="details_right coupon_right_blue" id="hascoupon">-￥39  > </text>                                 -->
                            </div>
                            <div class="details_store">
                                <text class="details_left coupon_left">支付方式</text>
                                <text class="details_right coupon_right">
                                    <img src="images/pay_way/wx_pay.png" /> 支付宝支付 ></text>
                            </div>
                        </div>
                        <div class="agree_protocol">
                            <img src="images/pay_way/select_way.png" alt="">
                            <text>我已阅读并同意
                                <a href="javascript:;">《支付协议》</a>
                            </text>
                        </div>
                    </div>
                </div>

                <!-- 已取消/过号 -->
                <div id="item3mobile" class="mui-slider-item mui-control-content">
                    <div class="item1waiting">
                        <text class="item1waittitle">已取消</text>
                        <text class="item1waitnum">订单编号
                            <span>2018091874938</span>
                        </text>
                    </div>
                    <!-- 评分模块 -->
                    <div class="grade">
                        <div class="store_grade line_up-num">
                            <div class="grade_top">A26</div>
                            <div class="grade_bottom">排队号码</div>
                        </div>
                    </div>
                    <!-- 地址 -->
                    <div class="hair_address">
                        <div class="dian">店</div>
                        <text>武汉市 江汉区 武汉商务区地铁站匠心汇B18-7商铺</text>
                        <div class="add_right">></div>
                    </div>
                    <!-- 排号详细信息 -->
                    <div class="numdetails">
                        <div class="details_store">
                            <text class="details_left">所在店面</text>
                            <text class="details_right">武汉商务区·匠心汇店</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">发型师</text>
                            <text class="details_right">Gilbert</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">合计</text>
                            <text class="details_right">￥39</text>
                        </div>
                        <div class="details_store">
                            <text class="details_left">时间</text>
                            <text class="details_right">2018-09-12 15:01:24</text>
                        </div>
                    </div>
                    <button class="cancel again_btn" id="takenum_again">重新取号</button>
                </div>
                <div id="item4mobile" class="mui-slider-item mui-control-content">
                    <div class="finished">
                        <div class="item1waiting">
                            <text class="item1waittitle">已完成</text>
                            <text class="item1waitnum">订单编号
                                <span>2018091874938</span>
                            </text>
                        </div>
                        <div class="finished_details">
                            <div class="finished_details_left">
                                <div class="fininshed_details_name">
                                    <div class="finished_details_storename">武汉商务区·匠心汇店</div>
                                    <div class="finished_details_hairname">Gilbert</div>
                                </div>
                                <div class="finished_details_price"><span>￥</span>39</div>
                            </div>
                            <div class="finished_details_right">
                                <div class="finished_details_datetime">2018-09-12 15:01:24</div>
                                <button class="finished_details_evaluate toevaluate">去评价</button>
                            </div>
                        </div>
                    </div>
                    <div class="finished">
                            <div class="item1waiting">
                                <text class="item1waittitle">已完成</text>
                                <text class="item1waitnum">订单编号
                                    <span>2018091874938</span>
                                </text>
                            </div>
                            <div class="finished_details">
                                <div class="finished_details_left">
                                    <div class="fininshed_details_name">
                                        <div class="finished_details_storename">武汉商务区·匠心汇店</div>
                                        <div class="finished_details_hairname">Gilbert</div>
                                    </div>
                                    <div class="finished_details_price"><span>￥</span>39</div>
                                </div>
                                <div class="finished_details_right">
                                    <div class="finished_details_datetime">2018-09-12 15:01:24</div>
                                    <button class="finished_details_evaluate toevaluate">去评价</button>
                                </div>
                            </div>
                        </div>
                        <div class="finished">
                                <div class="item1waiting">
                                    <text class="item1waittitle">已完成</text>
                                    <text class="item1waitnum">订单编号
                                        <span>2018091874938</span>
                                    </text>
                                </div>
                                <div class="finished_details">
                                    <div class="finished_details_left">
                                        <div class="fininshed_details_name">
                                            <div class="finished_details_storename">武汉商务区·匠心汇店</div>
                                            <div class="finished_details_hairname">Gilbert</div>
                                        </div>
                                        <div class="finished_details_price"><span>￥</span>39</div>
                                    </div>
                                    <div class="finished_details_right">
                                        <div class="finished_details_datetime">2018-09-12 15:01:24</div>
                                        <button class="finished_details_evaluate lookfor_order">查看订单</button>
                                    </div>
                                </div>
                            </div>
                    <!-- <div class="evaluated"></div> -->
                    <!-- <div id="scroll3" class="mui-scroll-wrapper">
                        <div class="mui-scroll">
                            <div class="mui-loading">
                                <div class="mui-spinner">
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <!-- 底部确认支付 -->
        <div class="footer_confirmpay">
            <div class="footer_price">应付金额
                <text>
                    <span>￥</span>39
                </text>
            </div>
            <button class="footer_btn" id="pay">确认支付</button>
        </div>


        <!-- 底部tab栏 -->
        <div class="footer_tab">
            <div class="f_nav">
                <div class="tab_active"></div>
                <img src="images/index/index.png" alt="">
                <text>首页</text>
            </div>
            <div class="f_nav">
                <div></div>
                <img src="images/index/dingdan.png" alt="">
                <text>订单</text>
            </div>
            <div class="f_nav">
                <div></div>
                <img src="images/index/wode.png" alt="">
                <text>我的</text>
            </div>
        </div>

        <!-- 自定义位置弹出层 -->
        <div id="div"></div>
        <div id="popover" class="mui-popover" style="height: 250px;">
            <div class="mui-popover-arrow"></div>
            <div class="mui_popover-content">
                <div class="popover_title">取消排号</div>
                <div class="popover_price">
                    <p>马上就要排到了哦</p>
                    <p>你真的决定要放弃吗</p>
                </div>
                <div class="popover_btn">
                    <button class="popover_cancel">再等一会</button>
                    <a class="mui-control-item" href="#item3mobile">
                        <button class="popover_giveup" id="giveup_num">放弃排号</button>
                    </a>

                </div>
            </div>
        </div>

    </div>
</body>

</html>